<template>
    <el-dialog title="编辑员工" v-model="EditEmployeeDialogVisible" width="60%" :close-on-click-modal="false"
        :show-close="false" :close-on-press-escape="false">
        <el-form :model="employeeForm" ref="employeeFormRef" label-width="100px"
            :style="{ 'max-height': '50vh', 'overflow-y': 'auto' }">
            <!-- 姓名 -->
            <el-form-item label="姓名" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                <el-input v-model="employeeForm.name" placeholder="请输入员工姓名"></el-input>
            </el-form-item>

            <!-- 性别 -->
            <el-form-item label="性别" :rules="[{ required: true, message: '请选择性别', trigger: 'blur' }]">
                <el-select v-model="employeeForm.gender" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>

            <!-- 出生日期 -->
            <el-form-item label="出生日期" :rules="[{ required: true, message: '请选择出生日期', trigger: 'blur' }]">
                <el-date-picker v-model="employeeForm.date_of_birth" placeholder="请选择出生日期" type="date"></el-date-picker>
            </el-form-item>

            <!-- 邮箱 -->
            <el-form-item label="邮箱"
                :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入有效的邮箱', trigger: ['blur', 'change'] }]">
                <el-input v-model="employeeForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>

            <!-- 电话号码 -->
            <el-form-item label="电话号码" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }]">
                <el-input v-model="employeeForm.phone_number" placeholder="请输入电话号码"></el-input>
            </el-form-item>

            <!-- 入职日期 -->
            <el-form-item label="入职日期" :rules="[{ required: true, message: '请选择入职日期', trigger: 'blur' }]">
                <el-date-picker v-model="employeeForm.hire_date" placeholder="请选择入职日期" type="date"></el-date-picker>
            </el-form-item>

            <!-- 职位 -->
            <el-form-item label="职位" :rules="[{ required: true, message: '请输入职位', trigger: 'blur' }]">
                <el-input v-model="employeeForm.position" placeholder="请输入职位"></el-input>
            </el-form-item>

            <!-- 部门 -->
            <el-form-item label="部门" :rules="[{ required: true, message: '请输入部门', trigger: 'blur' }]">
                <el-input v-model="employeeForm.department" placeholder="请输入部门"></el-input>
            </el-form-item>

            <!-- 工资 -->
            <el-form-item label="工资" :rules="[{ required: true, message: '请输入工资', trigger: 'blur' }]">
                <el-input v-model="employeeForm.salary" placeholder="请输入工资"></el-input>
            </el-form-item>

            <!-- 地址 -->
            <el-form-item label="地址" :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]">
                <el-input v-model="employeeForm.address" placeholder="请输入地址"></el-input>
            </el-form-item>

            <!-- 状态 -->
            <el-form-item label="状态" :rules="[{ required: true, message: '请输入状态', trigger: 'blur' }]">
                <el-select v-model="employeeForm.status" placeholder="请选择状态">
                    <el-option label="在岗" value="在岗"></el-option>
                    <el-option label="离职" value="离职"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancleDialog">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue"
import { updateData } from "../../../api/api"

const props = defineProps({
    EditEmployeeDialogVisible: {
        type: Boolean,
        default: false
    },
    employeeForm: {
        type: Object,
        default: {}
    }
})

const EditEmployeeDialogVisible = ref(props.EditEmployeeDialogVisible)
watch(() => props.EditEmployeeDialogVisible, (newVal) => {
    EditEmployeeDialogVisible.value = newVal
})
watch(() => props.employeeForm, (newVal) => {
    employeeForm.value = newVal

})

const emit = defineEmits<{ (event: string): void }>()
const cancleDialog = () => {
    emit("closeDialog")
}
// 员工表单数据
let employeeForm = ref(props.employeeForm)


// // 重置表单
// const resetForm = () => {
//     emit("closeDialog")
//     employeeForm.value = {
//         "name": "",
//         "gender": "",
//         "date_of_birth": "",
//         "email": "",
//         "phone_number": "",
//         "hire_date": "",
//         "position": "",
//         "department": "",
//         "salary": "",
//         "address": "",
//         "status": ""
//     };
// };

// 提交表单
const submitForm = async () => {
    // //格式化时间
    employeeForm.value.date_of_birth = formatDateToYYYYMMDD(employeeForm.value.date_of_birth)
    employeeForm.value.hire_date = formatDateToYYYYMMDD(employeeForm.value.hire_date)
    const res = await updateData(`/employees/${employeeForm.value.employee_id}`, employeeForm.value)
    emit("closeDialog")
    emit("refreshPage")
    console.log("res", res);

};
function formatDateToYYYYMMDD(date: string) {
    if (!date) return null; // 如果没有传入日期，返回null

    const d = new Date(date); // 创建日期对象
    const year = d.getFullYear(); // 获取年份
    const month = String(d.getMonth() + 1).padStart(2, '0'); // 获取月份，并确保是两位数
    const day = String(d.getDate()).padStart(2, '0'); // 获取日期，并确保是两位数

    return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
}
</script>
<style scoped lang="scss"></style>